import React, { useState, useEffect, useRef } from 'react';
import { EdrmsTypeRankStyle } from './style';
import * as echarts from 'echarts/core';
import { EdrmsTypeDto } from '@/services/types';


type EdrmsTypePiePropsType = {
    data: EdrmsTypeDto
};
type ListType = { sort: number; name: string; number: number };
const EdrmsTypeRank: React.FC<EdrmsTypePiePropsType> = (props) => {
    const { data } = props
    const chartRef = useRef(null);
    let edrmsTypeDataList: ListType[];
    edrmsTypeDataList = (data?.edrmsTypeData || []).slice(0,5).map(item => { item.number = Number(item.perCentNumber); return item });
    // let option = {
    //     title: {
    //     },
    //     tooltip: {
    //         trigger: 'axis',
    //         axisPointer: {
    //             type: 'shadow'
    //         }
    //     },
    //     grid: {
    //         left: '3%',
    //         right: '3%',
    //         bottom: '3%',
    //         containLabel: true
    //     },
    //     xAxis: {
    //         type: 'value',
    //         boundaryGap: [0, 0.01],
    //         axisTick: { show: false },
    //         splitLine: {
    //             show: false
    //         },
    //     },
    //     yAxis: {
    //         type: 'category',
    //         data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World'],
    //     },
    //     series: [
    //         {
    //             name: '2011',
    //             type: 'bar',
    //             data: [18203, 23489, 29034, 104970, 131744, 630230], itemStyle: {
    //                 normal: {
    //                     label: {
    //                         show: true, //开启显示
    //                         position: 'right', //顶部显示
    //                         textStyle: {
    //                             //数值样式
    //                             color: '#ccc',
    //                             fontSize: 12,
    //                         },
    //                     },
    //                 },
    //             },
    //         }

    //     ]
    // };
    useEffect(() => {
        // let chart: any = null;
        // if (chartRef.current) {
        //     // 创建一个echarts实例，返回echarts实例。不能在单个容器中创建多个echarts实例
        //     chart = echarts.init(chartRef.current);
        //     // 设置图表实例的配置项和数据
        //     option && chart.setOption(option);
        // }

        // 组件卸载
        return () => {
            // myChart.dispose() 销毁实例。实例销毁后无法再被使用
            // chart.dispose();
        };
    }, [data]);

    return (
        <EdrmsTypeRankStyle>
            <div className='edrmsTypeRank'>
                {(edrmsTypeDataList || []).map(item => (
                    <div className='rankItem' key={item.sort}>
                        <div className='index'>{item.sort}</div>
                        <div className='title' title={item.name}>{item.name}</div>
                        <div className='rankValue'>
                            <div
                                className='rankValueHigh' style={{ width: `${item.number}%` }}
                            ></div>
                        </div>
                        <div>{item.number}%</div>
                    </div>
                ))
                }
            </div>
        </EdrmsTypeRankStyle >
    );
};

export default EdrmsTypeRank;
